<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,ininial=1,maximum=1,user-scalable=no">
    <script type="text/javascript" src="./js/winResponsive.js"></script>


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="./js/jquery.mCustomScrollbar.css">
    <style type="text/css">
        .content{
            width: 100%;
            
            overflow-y: hidden;
        }
    </style>
    


</head>
<body>

    <div class="header">
        <a href="" class="log">
            <img src="images/log.png" alt="">
        </a>
        <div class="search">
            <form action="">
                <img src="images/search.png" alt="">
                <input type="text" placeholder="输入商家、分类或商圈">
            </form>
        </div>
        <a href="" class="scanning">
            <img src="images/shaoyishao.png" alt="">
        </a>
        <a href="" class="remind">
            <img src="images/tixing.png" alt="">
        </a>
    </div>
<div class="mCustomScrollbar content" data-mcs-theme="rounded-dots-dark">
    <section class="body">
        <section class="background top">
            <div class="top">
                <div class="box top-box">
                    <ul class="lunbo">
                        <li>
                            <a href="">
                                <img class="picture" src="images/index_18.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img class="picture" src="images/i-background-1.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img class="picture" src="images/i-background-2.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img class="picture" src="images/i-background-3.jpg" alt="">
                            </a>
                        </li>
                    </ul>
                    <div class="top-left">&lt;</div>
                    <div class="top-right">&gt;</div>
                    <div class="btn"></div>
                </div>
            </div>
        </section>
        <nav>
            <section class="container">
                <figure>
                    <a href="">
                        <img src="images/shop.jpg" alt="">
                    </a>
                    <figcaption>
                        抽奖抽奖
                    </figcaption>
                </figure>
                <figure>
                    <a href="">
                        <img src="images/shop.jpg" alt="">
                    </a>
                    <figcaption>
                        抽奖抽奖
                    </figcaption>
                </figure>
                <figure>
                    <a href="">
                        <img src="images/shop.jpg" alt="">
                    </a>
                    <figcaption>
                        抽奖抽奖
                    </figcaption>
                </figure>
                <figure>
                    <a href="">
                        <img src="images/shop.jpg" alt="">
                    </a>
                    <figcaption>
                        抽奖抽奖
                    </figcaption>
                </figure>
            </section>
        </nav>

        <section class="commodity">
            <a href="" class="name">Fresh奶</a>
            <a href="" class="discount">
                <div>
                    光明畅优乳杆菌<span>6</span>元/<span>2</span>瓶
                </div>
                <p>更多优惠 低至5折</p>
            </a>
            <a href="" class="picture"><img src="images/Bottle.png" alt=""></a>
        </section>
        <section class="commodity">
            <a href="" class="name">Fresh奶</a>
            <a href="" class="discount">
                <div>
                    光明畅优乳杆菌<span>6</span>元/<span>2</span>瓶
                </div>
                <p>更多优惠 低至5折</p>
            </a>
            <a href="" class="picture"><img src="images/Bottle.png" alt=""></a>
        </section>
        <section class="commodity">
            <a href="" class="name">Fresh奶</a>
            <a href="" class="discount">
                <div>
                    光明畅优乳杆菌<span>6</span>元/<span>2</span>瓶
                </div>
                <p>更多优惠 低至5折</p>
            </a>
            <a href="" class="picture"><img src="images/Bottle.png" alt=""></a>
        </section>

    </section>
</div>
    <div class="footer">
        <a href="">
            <img src="images/home.png" alt="">
            <p>首页</p>
        </a>
        <a href="">
            <img src="images/lightning.png" alt="">
            <p>闪送超市</p>
        </a>
        <a href="">
            <img src="images/my.png" alt="">
            <p>我的</p>
        </a>
        <a href="">
            <img src="images/Shopping.png" alt="">
            <p>￥0起送</p>
        </a>
    </div>

<script src="./js/jquery-1.11.1/jquery.js"></script>
<script src="./js/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
   
 (function($){
     $(window).on("load",function(){
        
        $(".content").css({height:($(window).height()-$('.footer').height()-$('.header').height()-25)})
         console.log($(window).height())
         $(".content").mCustomScrollbar({
            
            theme:"dark",
            
         });
     });
 })(jQuery);

</script>

</body>
</html>
<script>

        var box=document.querySelector(".top-box");
        var lunbo=document.querySelector(".lunbo");
        var lunboLi=document.querySelectorAll(".lunbo li");
        var btn=document.querySelector(".btn");
        var topLeft=document.querySelector(".top-left");
        var topRight=document.querySelector(".top-right");
    
    
        var lunboLiLength=lunboLi.length;
    
        console.log(box)
        var number=1;
        
        //添加span
        for(var i=0;i<lunboLiLength;i++){
            var span = document.createElement('span');
            //console.log(span)
            span.innerHTML=i+1;
            btn.appendChild(span);
            //console.log(btn.appendChild(span));
        }
        var spans = document.querySelectorAll('.btn span');
        spans[0].className="cur";
    
    
        function run(){
            if(number==lunboLiLength){
                number=0;
            }
            lunbo.style.left=-1*number*7.5+"rem";
            for(var i=0;i<lunboLiLength;i++){
                spans[i].className="";
            }
            spans[number].className="cur";
            number++;
        }
        var T=setInterval(run,1500);
        
        
        for(var i=0;i<lunboLiLength;i++){
            spans[i].index=i;
            spans[i].onclick=function(){
                lunbo.style.left=-1*this.index*7.5+"rem";
                for(var i=0;i<lunboLiLength;i++){
                    spans[i].className="";
                }
                this.className="cur";
                number=this.index;
            }
            console.log(spans[i])
        }
    
        topLeft.onclick=function(){
            
            if(number==0){
                number=lunboLiLength;
            }
            number--;
            lunbo.style.left=-1*number*7.5+"rem";
            for(var i=0;i<lunboLiLength;i++){
                spans[i].className="";
            }
            spans[number].className="cur";
            
        }
        topRight.onclick=function(){
            
            if(number==lunboLiLength-1){
                number=-1;
            }
            number++;
            lunbo.style.left=-1*number*7.5+"rem";
            for(var i=0;i<lunboLiLength;i++){
                spans[i].className="";
            }
            spans[number].className="cur";
            
        }
    
        
     
        box.onmouseover=function(){
            clearInterval(T);
        }
        box.onmouseout=function(){
            T=setInterval(run,2000);
        } 
        clearInterval(T);
        console.log(T)
    
    </script>